<template>
  <div class="ChannelAnalysis">
    <el-card>
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          渠道增长
        </h3>
        <div class="right">
          <span class="txt">渠道：</span>
          <el-select
            class="channelselect"
            v-model="channel"
            placeholder="请选择渠道"
            size="small"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="渠道"> </el-table-column>
        <el-table-column prop="address" label="新增用户"> </el-table-column>
        <el-table-column prop="address" label="新增男用户"> </el-table-column>
        <el-table-column prop="address" label="新增女用户"> </el-table-column>
        <el-table-column prop="address" label="新增充值人数"> </el-table-column>
        <el-table-column prop="address" label="新增充值金额"> </el-table-column>
        <el-table-column prop="address" label="新增用户付费率">
        </el-table-column>
        <el-table-column prop="address" label="存留充值人数"> </el-table-column>
        <el-table-column prop="address" label="存留充值金额"> </el-table-column>
        <el-table-column prop="address" label="总充值金额"> </el-table-column>
        <el-table-column prop="address" label="活跃用户"> </el-table-column>
        <el-table-column prop="address" label="活跃用户付费率">
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- <el-card style="margin-top: 20px">
      <div class="searchBox">
        <div class="left">
          <el-radio-group v-model="type" size="small" fill="#7b94d8">
            <el-radio-button label="1">新增</el-radio-button>
            <el-radio-button label="2">总量</el-radio-button>
            <el-radio-button label="3">付费率</el-radio-button>
            <el-radio-button label="4">提现率</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus1"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
        </div>
      </div>
      <div class="chart">
        <div id="echarts" style="width: 100%; height: 100%"></div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          性别统计（总计）
        </h3>
        <div class="right">
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus2"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
        </div>
      </div>
      <div class="chart">
        <div id="echartsB" style="width: 100%; height: 100%"></div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          渠道在线人数与在线时长表
        </h3>
        <div class="right">
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr3"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus3"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
        </div>
      </div>
    </el-card> -->
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      //渠道增涨
      channel: "",
      timeArr: [],
      startTime: "",
      endTime: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      //图表1
      // type: "1",
      // timeArr1: [],
      // startTime1: "",
      // endTime1: "",
      // myChart: null,
      // //图表2
      // timeArr2: [],
      // startTime2: "",
      // endTime2: "",
      // myChartB: null,
      // //渠道在线人数与在线时长表
      // timeArr3: [],
      // startTime3: "",
      // endTime3: "",
      //通用
      channelOptions: [],
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
    // focus1() {
    //   if (!this.timeArr1) {
    //     this.timeArr1 = [];
    //   }
    //   this.startTime1 = this.timeArrA1[0];
    //   this.endTime1 = this.timeArrA1[1];
    // },
    // focus2() {
    //   if (!this.timeArr2) {
    //     this.timeArr2 = [];
    //   }
    //   this.startTime2 = this.timeArrA2[0];
    //   this.endTime2 = this.timeArrA2[1];
    // },
    // focus3() {
    //   if (!this.timeArr3) {
    //     this.timeArr3 = [];
    //   }
    //   this.startTime3 = this.timeArrA3[0];
    //   this.endTime3 = this.timeArrA3[1];
    // },
    getList() {},
    // chartInit() {
    //   this.myChart = this.$echarts.init(document.getElementById("echarts"));
    //   this.myChartB = this.$echarts.init(document.getElementById("echartsB"));
    // },
    // setMychart() {
    //   // var colors = ["#7b94d8", "#91CC75", "#EE6666"];
    //   this.myChart.setOption({
    //     // color: colors,
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //       },
    //     },
    //     grid: {
    //       // right: "20%",
    //     },
    //     legend: {
    //       data: ["小米", "苹果", "官方", "华为"],
    //     },
    //     xAxis: {
    //       type: "category",
    //       axisTick: {
    //         alignWithLabel: true,
    //       },
    //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //     },
    //     yAxis: [
    //       {
    //         type: "value",
    //         // name: "金额",
    //         min: 0,
    //         position: "left",
    //         axisLine: {
    //           show: true,
    //           lineStyle: {
    //             color: "#7b94d8",
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value} ",
    //         },
    //       },
    //       // {
    //       //   type: "value",
    //       //   name: "人数",
    //       //   min: 0,
    //       //   position: "right",
    //       //   offset: 80,
    //       //   axisLine: {
    //       //     show: true,
    //       //     lineStyle: {
    //       //       color: colors[1],
    //       //     },
    //       //   },
    //       //   axisLabel: {
    //       //     formatter: "{value} ",
    //       //   },
    //       // },
    //     ],
    //     series: [
    //       //   {
    //       //     name: "金额",
    //       //     type: "line",
    //       //     barWidth: 30,
    //       //     data: [10],
    //       //   },
    //       //   {
    //       //     name: "人数",
    //       //     type: "line",
    //       //     yAxisIndex: 1,
    //       //     barWidth: 30,
    //       //     data: [20],
    //       //   },
    //       {
    //         name: "小米",
    //         data: [820, 932, 901, 934, 1290, 1330, 1320],
    //         type: "line",
    //         smooth: true,
    //       },
    //       {
    //         name: "苹果",
    //         data: [82, 93, 91, 934, 120, 130, 120],
    //         type: "line",
    //         smooth: true,
    //       },
    //       {
    //         name: "官方",
    //         data: [76, 33, 81, 94, 140, 120, 20],
    //         type: "line",
    //         smooth: true,
    //       },
    //       {
    //         name: "华为",
    //         data: [42, 90, 51, 834, 220, 330, 420],
    //         type: "line",
    //         smooth: true,
    //       },
    //     ],
    //   });
    // },
    // setMychartB() {
    //   var colors = ["#7b94d8", "#91CC75", "#EE6666"];
    //   this.myChartB.setOption({
    //     color: colors,
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //       },
    //     },
    //     grid: {
    //       right: "20%",
    //     },
    //     legend: {
    //       data: ["男", "女"],
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         axisTick: {
    //           alignWithLabel: true,
    //         },
    //         data: ["苹果", "小米", "华为", "官方"],
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         type: "value",
    //         name: "男",
    //         min: 0,
    //         position: "right",
    //         axisLine: {
    //           show: true,
    //           lineStyle: {
    //             color: colors[0],
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value} ",
    //         },
    //       },
    //       {
    //         type: "value",
    //         name: "女",
    //         min: 0,
    //         position: "right",
    //         offset: 80,
    //         axisLine: {
    //           show: true,
    //           lineStyle: {
    //             color: colors[1],
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value} ",
    //         },
    //       },
    //     ],
    //     series: [
    //       {
    //         name: "男",
    //         type: "bar",
    //         barWidth: 30,
    //         data: [10, 5, 9, 7],
    //       },
    //       {
    //         name: "女",
    //         type: "bar",
    //         yAxisIndex: 1,
    //         barWidth: 30,
    //         data: [20, 15, 30, 16],
    //       },
    //     ],
    //   });
    // },
  },
  mounted() {
    // this.chartInit();
    // this.setMychart();
    // this.setMychartB();
  },
};
</script>

<style lang="less" scoped>
.ChannelAnalysis {
  padding: 20px;
  //通用
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .txt {
    display: inline-block;
    height: 32px;
    background-color: #f5f7fa;
    line-height: 32px;
    padding-left: 10px;
    color: #9d9399;
    border-radius: 4px 0 0 4px;
    border: 1px solid #dcdfe6;
    border-right: none;
  }
  /deep/ .el-input__inner {
    border-radius: 0 4px 4px 0 !important;
  }
  .sexselect {
    width: 100px;
    margin: 0 10px 0 0;
  }
  .chart {
    width: 100%;
    height: 400px;
  }
}
</style>